//首先写注册页面
//💕 每个输入框change的时候,进行验证
const username = document.querySelector('[name=username]')
const password = document.querySelector('[name=password]')
//将每个input里面的属性构建成对象,然后将他们组合成数组
const inputInfos = [{
  dom: username,
  res: /^[a-zA-Z0-9]{8,30}$/,
  msg: '请输入8-30位的字符，且只能包含英文字母（大小写）和数字'
}, {
  dom: password,
  res: /^[a-zA-Z0-9]{6,30}$/,
  msg: '请输入6-30位的字符，且只能包含英文字母（大小写）和数字'

}]

username.addEventListener('change', function (e) {
  verifyInput(inputInfos[0])
})

password.addEventListener('change', function (e) {
  verifyInput(inputInfos[1])
})
//🏃 将验证函数和弹框提取出来--提取到common.js



//💕 点击小眼睛,密码框,Text--⁉️⁉️ to be ended
document.querySelector('.input-group-text').addEventListener('click', function () {
  alert(1)
  document.querySelector('[name=password]').style.type = 'text'
})


//💕💕 点击注册,收集表单数据,提交服务器,然后弹窗成功或者失败--成功同时要跳转到index页面



document.querySelector('#btn-register').addEventListener('click', function () {
  //🏃 再次验证每个输入框的正则
  if (!verifyInput(inputInfos[0])) {
    toast('请输入正确的账号名', false)
    return
  }
  if (!verifyInput(inputInfos[1])) {
    toast('请输入正确的密码', false)

    return
  }
  //收集表单数据,发送,然后弹窗成功
  const form = document.querySelector('.register-form')
  const fd = serialize(form, { hash: true, empty: true })
  console.log(fd)

  axios({ url: '/register', method: 'post', data: fd }).then(res => {
    toast('登录成功', true)
    setTimeout(() => {
      location.href = '../login.html'
    }, 1500)
  }).catch(err => {
    console.dir(err)
  })


})







